<script setup>
    import * as echarts from "echarts"
    import { onMounted, onUnmounted } from 'vue'

    const props = defineProps({
        data: {
            type: Array,
            default: []
        },
        ageCount: {
            type: Array,
            default: []
        }
    })

    let type = props.data
    let dataValue = props.ageCount

    let eCharts = null
    let CrowdBar = $ref(null) 

    onMounted(() => {
        init()
    })

    const init = () => {
        let dataAxis = type;
        // prettier-ignore
        let data = dataValue;

        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { 
                    type: 'shadow' 
                },
                backgroundColor: "#0157DA",
                borderWidth: 0,
                textStyle: {
                    color: "#fff"
                },
            },
            grid: {
                top: '10%',
                left: '6%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    // inside: true,
                    color: '#fff',
                    // interval:0,
                    // rotate:40
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                }
            },
            series: [
                {
                    type: 'bar',
                    barWidth: 18,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#6CF9F5' },
                                // { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: 'rgba(108,249,245, 0)'}
                            ]),
                            barBorderRadius: [20, 20, 0, 0],
                            label: {
                                show: true, 
                                position: 'top',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12
                                }
                            }
                        }
                    },
                    data: data
                }
            ]
        }

        eCharts = echarts.init(CrowdBar)
        eCharts.setOption(option)
    }



</script>

<template>
    <div class="party-age-warp card-box">
        <div class="card-title">
            <img src="../../../assets/images/card-title-icon-dangling.png">
            党龄分布
        </div>

        <div class="echarts-bar" ref="CrowdBar"></div>

    </div>
</template>

<style lang="less" scoped>
    .party-age-warp{
        height: 260px;

        .echarts-bar{
            height: 220px;
        }
    }
</style>